<template>
  <div class="app-container">
    <el-card>
      <div class="yuebon-app-leftcontainer">
        <el-form ref="editFromRef" :model="editFrom" :rules="rules" label-position="right" class="yuebon-db-editform">
          <el-form-item label="数据库类型" :label-width="formLabelWidth" prop="DbType">
            <el-select v-model="editFrom.DbType" clearable placeholder="请选数据库类型">
              <el-option
                v-for="item in selectDbTypes"
                :key="item.Id"
                :label="item.Title"
                :value="item.Id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="数据库地址" :label-width="formLabelWidth" prop="DbAddress">
            <el-input v-model="editFrom.DbAddress" placeholder="请输入数据库地址" autocomplete="off" clearable />
          </el-form-item>
          <el-form-item label="数据库名称" :label-width="formLabelWidth" prop="DbName">
            <el-input v-model="editFrom.DbName" placeholder="请输入数据库名称" autocomplete="off" clearable />
          </el-form-item>
          <el-form-item label="用户名" :label-width="formLabelWidth" prop="DbUserName">
            <el-input v-model="editFrom.DbUserName" placeholder="请输入用户名" autocomplete="off" clearable />
          </el-form-item>
          <el-form-item label="访问密码" :label-width="formLabelWidth" prop="DbPassword">
            <el-input v-model="editFrom.DbPassword" placeholder="请输入访问密码" autocomplete="off" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleEncrypt()">生成连接字符串</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="yuebon-app-rightcontainer">
        <el-form ref="resultFromRef" :model="resultFrom" :rules="rules" label-position="top" class="yuebon-db-editform">
          <el-form-item label="数据库连接字符串" :label-width="formLabelWidth" prop="ConnStr">
            <el-input v-model="resultFrom.ConnStr" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="数据库连接字符串" autocomplete="off" clearable />
          </el-form-item>
          <el-form-item label="加密数据库连接字符串" :label-width="formLabelWidth" prop="EncryptConnStr">
            <el-input v-model="resultFrom.EncryptConnStr" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="数据库连接字符串" autocomplete="off" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleDecrypt()">解密数据库连接字符串</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script setup name="DbTools">

import { dbtoolsConnStrDecrypt, dbtoolsConnStrEncrypt } from '@/api/developers/toolsservice'

const { proxy } = getCurrentInstance()

const formLabelWidth=ref("120px")
const data = reactive({
  selectDbTypes: [{
    Id: '1',
    Title: 'SqlServer'
  }, {
    Id: '0',
    Title: 'MySql'
  }],
  editFrom: {
    DbAddress: '',
    DbName: '',
    DbUserName: '',
    DbPassword: '',
    DbType: ''
  },
  rules: {
    DbAddress: [
      { required: true, message: '请输入数据库地址', trigger: 'blur' },
      { min: 1, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
    ],
    DbName: [
      { required: true, message: '请输入数据库名称', trigger: 'blur' },
      { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
    ],
    DbUserName: [
      { required: true, message: '请输入用户名', trigger: 'blur' },
      { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
    ],
    DbPassword: [
      { required: true, message: '请输入访问密码', trigger: 'blur' },
      { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
    ],
    DbType: [
      { required: true, message: '请选数据库类型', trigger: 'blur' }
    ]
  },
  resultFrom: {
    ConnStr: '',
    EncryptConnStr: ''
  },
  rulesresultFrom: {
    EncryptConnStr: [
      { required: true, message: '加密数据库连接字符串', trigger: 'blur' },
      { min: 5, max: 50, message: '长度在 5 到 50 个字符', trigger: 'blur' }
    ]
  }
})

const { selectDbTypes, editFrom, rules ,resultFrom,rulesresultFrom} = toRefs(data);

/**
 * 解密数据库
 */
function handleDecrypt() {
  proxy.$refs['resultFromRef'].validate((valid) => {
    if (valid) {
      var dataInfo = {
        strConn: this.resultFrom.EncryptConnStr
      }
      dbtoolsConnStrDecrypt(dataInfo).then(res => {
        if (res.Success) {
          this.resultFrom.ConnStr = res.ResData.ConnStr
          proxy.$modal.msgSuccess('恭喜你，操作成功')
        } else {
          proxy.$modal.msgError(res.ErrMsg)
        }
      })
    } else {
      return false
    }
  })
}
/**
 * 生成连接字符串
 */
function handleEncrypt() {
  proxy.$refs['editFromRef'].validate((valid) => {
    if (valid) {
      var dataInfo = {
        DbAddress: this.editFrom.DbAddress,
        DbName: this.editFrom.DbName,
        DbUserName: this.editFrom.DbUserName,
        DbPassword: this.editFrom.DbPassword,
        DbType: this.editFrom.DbType
      }
      dbtoolsConnStrEncrypt(dataInfo).then(res => {
        if (res.Success) {
          this.resultFrom.ConnStr = res.ResData.ConnStr
          this.resultFrom.EncryptConnStr = res.ResData.EncryptConnStr
          proxy.$modal.msgSuccess('恭喜你，操作成功')
        } else {
          proxy.$modal.msgError(res.ErrMsg)
        }
      })
    } else {
      return false
    }
  })
}
</script>
